<template>
	<view class="shopList" :style="{'--color':vuex_config.themeColor1}">
		<sww-swipe v-if="banner.length > 0" :list='banner' imgRadius="20" borderRadius="20"></sww-swipe>
		<view class="list">
			<view class="item" v-for="(item,index) in dataList" :key='index'>
				<view class="item-left">
					<image class="item-img" :src="item.logo || img" mode=""></image>
					<view class="item-center">
						<view class="title">{{item.name}}</view>
						<view class="ftitle u-line-1">{{item.introduce}}</view>
						<view class="ftitle">在售商品{{item.pro_count}}件</view>
					</view>
				</view>
				<view class="item-right" @click="open(item.pk_id)">
					<text style="margin-right: 10rpx;">进入店铺</text>
					<u-icon name="e775" size="20" :color="vuex_config.themeColor1" custom-prefix="iconfont"></u-icon>
				</view>
			</view>
		</view>
		<sww-load-more :params="dataListParams"></sww-load-more>
	</view>
</template>

<script>
	import {pagingMixin} from '@/mixins/pagingMixin'
	export default{
		mixins:[pagingMixin],
		data(){
			return{
				dataList:[],
				banner:[],
				img:require('@/static/icon/shop_img.png')
			}
		},
		onLoad(){
			this.initPage()
		},
		onReachBottom() {
			this._load_data();
		},
		methods:{
			initPage(){
				this._init_data('GetProductSupplierList')
				this.$resPost('GetCommonPicList',{
					type:9
				}).then(res=>{
					this.banner = res.data
				})
			},
			open(id){
				this.$to(`/package/index/shopDetail/index?id=${id}`)
			}
		}
	}
</script>
<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.shopList{
		padding: 20rpx 26rpx 0;
		.list{
			margin-top: 30rpx;
			.item{
				width: 100%;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.item-left{
					width: 80%;
					display: flex;
					align-items: center;
					.item-img{
						width: 180rpx;
						height: 120rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}
					.item-center{
						width:80%;
						display: flex;
						flex-direction: column;
						.title{
							font-size: 24rpx;
							color: #333;
							font-weight: bold;
							margin-bottom: 10rpx;
						}
						.ftitle{
							font-size: 20rpx;
							color: #999;
							margin-bottom: 10rpx;
						}
					}
				}
				.item-right{
					width: 145rpx;
					height: 60rpx;
					font-size: 20rpx;
					color: var(--color);
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 10rpx;
					border: 1px solid var(--color);
				}
			}
			
		}
	}
</style>
